<template>
	<div class="padding-container preview-wrap" v-loading.fullscreen.lock="fullscreenLoading">
		<div class="title-part">
			<span>{{ $root.lang.control.cert.detail.title }}</span>
		</div>
		<div class="data-preview">
	    <el-form class="tab-pan form-inline" size="small" label-position="right" :label-width="formLabelWidth">
        <el-form-item :label="getLabel('certNumber')">
          <span>50asdfasdf</span>
        </el-form-item>
        <el-form-item :label="getLabel('certName')">
          <span>my_android</span>
        </el-form-item>
        <el-form-item :label="getLabel('state')">
          <span>启用</span>
        </el-form-item>
        <el-form-item :label="getLabel('deviceNum')">
          <span>20</span>
        </el-form-item>
        <el-form-item :label="getLabel('publisher')">
          <span>makfds</span>
          <a class="download">{{ $root.lang.control.cert.detail.download }}</a>
        </el-form-item>
        <el-form-item :label="getLabel('theme')">
          <span>asdfa</span>
        </el-form-item>
        <el-form-item :label="getLabel('createDate')">
          <span>2018-01-01 00:00:00</span>
        </el-form-item>
        <el-form-item :label="getLabel('effectiveDate')">
          <span>2018-01-01 00:00:00</span>
        </el-form-item>
        <el-form-item :label="getLabel('expirationDate')">
          <span>2018-01-01 00:00:00</span>
        </el-form-item>

      </el-form>
		</div>
<!-- 		<el-tabs type="border-card">
		  <el-tab-pane label="应用信息">应用信息</el-tab-pane>
		  <el-tab-pane label="操作记录">操作记录</el-tab-pane>
		  <el-tab-pane label="日志列表">日志列表</el-tab-pane>
		</el-tabs> -->
	</div>
</template>

<script>
export default {
	name: 'CertDetail',
	data() {
		return {
			id: null,
			fullscreenLoading: true,
			baseData: {},
			formLabelWidth: '120px'
		}
	},
	methods: {
		getLabel(name) {
      return this.$root.lang.control.cert.detail[name]+'：'
    },
    getDetail() {
      this.fullscreenLoading = true
      this.request({
        url: '/api/cert/detail',
        method: 'get',
        params: {
          certNumber: this.id
        }
      }).then(response => {
        this.baseData = response.result
        this.fullscreenLoading = false
      }).catch(error => {
        this.fullscreenLoading = false
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    }
	},
	created() {
    this.$root.defaultActive = 'cert'
		if(this.$root.langType == 'en'){
      this.formLabelWidth = '160px'
    }
    this.id = (this.$route.params.id ? this.$route.params.id : null)
    this.getDetail();
	}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.padding-container {
		text-align: left;
		.title-part {
			text-align: left;
			padding-bottom:20px;
			font-size:18px;
		}
		.el-button {
			margin-left:40px;
		}
		.form-inline {
			display: inline-block;
			vertical-align: top;
			min-width:300px;
		}
		.el-form-item__label {
			width:130px !important;
		}
		.download {
			text-decoration: underline;
			margin-left:20px;
			cursor: pointer;
		}
	}
</style>